{% extends "base.html" %}

{% block content %}
<div class="container mt-5">
    <div class="p-5 mb-4 bg-light rounded-3">
        <div class="container-fluid py-5">
            <h1 class="display-5 fw-bold">需求管理系统</h1>
            <p class="col-md-8 fs-4">基于ITIL框架的端到端需求管理解决方案</p>
            
            <!-- 功能模块卡片组 -->
            <div class="row g-4 mt-3">
                <div class="col-md-3">
                    <a href="{{ url_for('hierarchy.index') }}" class="card text-decoration-none hover-lift">
                        <div class="card-body text-center">
                            <div class="text-primary mb-3">
                                <i class="bi bi-diagram-3 fs-1"></i>
                            </div>
                            <h5 class="card-title">业务层级管理</h5>
                            <p class="card-text text-muted small">配置L1-L5业务架构</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="{{ url_for('requirements.kanban') }}" class="card text-decoration-none hover-lift">
                        <div class="card-body text-center">
                            <div class="text-success mb-3">
                                <i class="bi bi-kanban fs-1"></i>
                            </div>
                            <h5 class="card-title">需求看板</h5>
                            <p class="card-text text-muted small">全生命周期需求跟踪</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="{{ url_for('requirements.classify') }}" class="card text-decoration-none hover-lift">
                        <div class="card-body text-center">
                            <div class="text-info mb-3">
                                <i class="bi bi-file-earmark-plus fs-1"></i>
                            </div>
                            <h5 class="card-title">创建需求</h5>
                            <p class="card-text text-muted small">添加新需求到系统</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="{{ url_for('communication.index') }}" class="card text-decoration-none hover-lift">
                        <div class="card-body text-center">
                            <div class="text-warning mb-3">
                                <i class="bi bi-chat-left-text fs-1"></i>
                            </div>
                            <h5 class="card-title">沟通纪要</h5>
                            <p class="card-text text-muted small">记录需求沟通信息</p>
                         </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统概览与快速开始 -->
    <div class="row g-4">
        <div class="col-lg-6">
            <div class="h-100 p-4 bg-primary text-white rounded-3">
                <h2 class="h4 mb-3">系统概览</h2>
                <p>基于ITIL框架的需求管理系统，覆盖需求捕获、分类、跟踪全流程</p>
                <ul class="list-unstyled">
                    <li class="mb-2"><i class="bi bi-check-circle me-2"></i>业务层级配置（L1-L5）</li>
                    <li class="mb-2"><i class="bi bi-check-circle me-2"></i>需求优先级自动计算</li>
                    <li class="mb-2"><i class="bi bi-check-circle me-2"></i>风险需求智能识别</li>
                    <li><i class="bi bi-check-circle me-2"></i>端到端需求追溯</li>
                </ul>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="h-100 p-4 bg-light border rounded-3">
                <h2 class="h4 mb-3">快速开始</h2>
                <ol class="ps-4">
                    <li class="mb-2">配置业务层级结构</li>
                    <li class="mb-2">添加需求类型</li>
                    <li class="mb-2">创建需求记录</li>
                    <li>在需求看板中跟踪状态</li>
                </ol>
                <a href="{{ url_for('hierarchy.index') }}" class="btn btn-primary mt-3">
                    <i class="bi bi-play-circle me-1"></i> 开始使用
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}